{% extends 'admin/base/base.html' %}


{% block title %}
  课程发布页
{% endblock %}

{% block link %}
<link rel="stylesheet" href="{% static 'plugins/markdown_editor/css/editormd.css' %}">
{% endblock %}

{% block content_header %}
  课程发布
{% endblock %}

{% block content %}
  <div class="row">
    <div class="col-md-12 col-xs-12 col-sm-12">
      <div class="box box-primary">
        <div class="box-body">

          <div class="form-group" style="margin-top: 30px;">
            <label for="news-title">课程标题(150个字以内)</label>
            {% if course %}
              <input type="text" class="form-control" id="news-title" name="news-title" placeholder="请输入课程标题"
                     value="{{ course.title }}">
            {% else %}
              <input type="text" class="form-control" id="news-title" name="news-title" placeholder="请输入课程标题"
                     autofocus>
            {% endif %}
          </div>

          <div class="form-group">
            <label for="news-desc">课程简介</label>
            {% if course %}
              <textarea name="news-desc" id="news-desc" placeholder="请输入课程简介" class="form-control"
                        style="height: 8rem; resize: none;">{{ course.profile }}</textarea>
            {% else %}
              <textarea name="news-desc" id="news-desc" placeholder="请输入课程简介" class="form-control"
                        style="height: 8rem; resize: none;"></textarea>
            {% endif %}
          </div>


          <div class="form-group" id="container">
            <label for="news-thumbnail-url">课程封面图</label>
            <div class="input-group">
              {% if course %}
                <input type="text" class="form-control" id="news-thumbnail-url" name="news-thumbnail-url"
                       placeholder="请上传图片或输入封面图地址" value="{{ course.cover_url }}">
              {% else %}
                <input type="text" class="form-control" id="news-thumbnail-url" name="news-thumbnail-url"
                       placeholder="请上传图片或输入封面图地址">
              {% endif %}

              <div class="input-group-btn">
                <button class="btn btn-info" id="upload-image-btn">上传至七牛云</button>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label for="docs-file-url">视频地址</label>
            <div class="input-group">
              {% if course %}
                <input type="text" class="form-control" id="docs-file-url" name="docs-file-url"
                       placeholder="请上传视频或输入视频地址" value="{{ course.video_url }}">
              {% else %}
                <input type="text" class="form-control" id="docs-file-url" name="docs-file-url"
                       placeholder="请上传视频或输入视频地址">
              {% endif %}

              <div class="input-group-btn">
                <label class="btn btn-default btn-file">
                  上传至服务器 <input type="file" id="upload-file-server">
                </label>
              </div>
            </div>
          </div>


          <div class="form-group">
            <label for="course-time">课程时长(单位：分钟)</label>
            {% if course %}
              <input type="text" class="form-control" id="course-time" name="course-time"
                     placeholder="请输入课程时长" value="{{ course.duration }}">
            {% else %}
              <input type="text" class="form-control" id="course-time" name="course-time"
                     placeholder="请输入课程时长" autofocus>
            {% endif %}
          </div>


          <div class="form-group">
            <label for="course-teacher">课程讲师</label>
            <select name="course-teacher" id="course-teacher" class="form-control">
              <option value="0">-- 请选择讲师 --</option>
              {% for teacher in teachers %}
                {% if course and teacher == course.teacher %}
                  <option value="{{ teacher.id }}" selected>{{ teacher.name }}</option>
                {% else %}
                  <option value="{{ teacher.id }}">{{ teacher.name }}</option>
                {% endif %}
              {% endfor %}
            </select>
          </div>


          <div class="form-group">
            <label for="course-category">课程分类</label>
            <select name="course-category" id="course-category" class="form-control">
              <option value="0">-- 请选择分类 --</option>
              {% for category in categories %}
                {% if course and category == course.category %}
                  <option value="{{ category.id }}" selected>{{ category.name }}</option>
                {% else %}
                  <option value="{{ category.id }}">{{ category.name }}</option>
                {% endif %}
              {% endfor %}
            </select>
          </div>


          <div class="form-group">
            <label for="course-outline">课程大纲</label>
            {% if course %}
              <div id="course-outline">
                <textarea name="content" style="display:none;">{{ course.outline|safe }}</textarea>
              </div>
            {% else %}
              <div id="course-outline">
                <textarea name="content" style="display:none;"></textarea>
              </div>
            {% endif %}
          </div>


        </div>
        <div class="box-footer">
          {% if course %}
            <a href="javascript:void (0);" class="btn btn-primary pull-right" id="btn-pub-news"
               data-news-id="{{ course.id }}">更新课程 </a>
          {% else %}
            <a href="javascript:void (0);" class="btn btn-primary pull-right" id="btn-pub-news">发布课程 </a>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block script %}
  <script src="{% static 'node_modules/@baiducloud/sdk/dist/baidubce-sdk.bundle.min.js' %}"></script>
  <script src="{% static 'plugins/markdown_editor/editormd.js' %}"></script>
  <script>
    let testEditor;
    $(function () {
      $.get("{% static 'plugins/markdown_editor/examples/test.md' %}", function (md) {
        testEditor = editormd("course-outline", {
          width: "98%",
          height: 730,
          path: "{% static 'plugins/markdown_editor/lib/' %}",
          markdown: md,
          codeFold: true,
          saveHTMLToTextarea: true,
          searchReplace: true,
          htmlDecode: "style,script,iframe|on*",
          emoji: true,
          taskList: true,
          tocm: true,  // Using [TOCM]
          tex: true,   // 开启科学公式TeX语言支持，默认关闭
          flowChart: true,  // 开启流程图支持，默认关闭
          sequenceDiagram: true,  // 开启时序/序列图支持，默认关闭,
          imageUpload: true,
          imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
          imageUploadURL: "{% url 'admin:markdown_image_upload' %}",
          onload: function () {
            console.log('onload', this);

          },
          {#/**设置主题颜色 把这些注释去掉主题就是黑色的了*/#}
          {#editorTheme: "pastel-on-dark",#}
          {#theme: "dark",#}
          {#previewTheme: "dark"#}
        });
      });
    });

  </script>
  <!-- 七牛云 客户端 并不经过服务端 服务器需要提供 token -->
  <script src="https://cdn.bootcss.com/plupload/2.1.9/moxie.min.js"></script>
  <script src="https://cdn.bootcss.com/plupload/2.1.9/plupload.dev.js"></script>
  <script src="https://cdn.bootcss.com/qiniu-js/1.0.17.1/qiniu.min.js"></script>
  <!--一定要在下面 js 文件顺序很重要 -->
  <script src="{% static 'js/admin/base/fqiniu.js' %}"></script>
  <script src="{% static 'js/admin/course/courses_pub.js' %}"></script>
{% endblock %}